import React, { forwardRef, useState, useImperativeHandle, Component, useRef, useCallback } from 'react';
import { Form, Input } from 'antd';

const FCForm = forwardRef((props, ref) => {
    const [fresh, setFresh] = useState(false);
    const attRef = useRef(0);
    console.log(props);
    let { getFieldDecorator } = props.form;
    useImperativeHandle(ref, () => ({
        form: props.form,
        fresh
    }));
    const handleClick = useCallback(() => {
        attRef.current++;
    }, []);
    return (
        <Form className="login-form">
            <Form.Item>
                {getFieldDecorator('username', {
                    rules: [{ required: true, message: 'Please input your username!' }]
                })(
                    <Input
                        placeholder="Username"
                    />,
                )}
            </Form.Item>
            {attRef.current}
            <button onClick={handleClick}>Fancy</button>
            <button onClick={() => setFresh(!fresh)}>刷新</button>
        </Form>
    );

});

// const EnhancedFCForm = Form()(FCForm);

const Child = forwardRef((props, ref) => {

    const method1 = () => {
        console.log(333);
    };
    useImperativeHandle(ref, () => ({
        method1
    }));
    return (
        <div>
            我是child
        </div>
    );
});

const FormHook = () => {
    const ref = React.createRef();
    const ref2 = React.createRef();
    return (
        <div>
            222
            {/* <EnhancedFCForm wrappedComponentRef={ref} /> */}
            {/* <button onClick={() => {
                console.log(ref.current);
                // ref.current.form.validateFieldsAndScroll((err, val) => {
                //     console.log(err, val);
                // });
            }}>test ref</button> */}
            <button onClick={() => {
                console.log(ref2.current);
            }}>get another child</button>
            {/* <div>Im refresh {ref.current?.fresh}</div> */}
            <Child ref={ref2} />
        </div>
    );
};

export default FormHook;